<!-- 收支明细 -->
<template>
	<view>
		<!-- 头部背景 -->
		<view class="headCss">
			<view class="div">
				<view class="headLeft">
					<view>{{balance}}</view>
					<view>当前现金余额（元）</view>
					<button type="primary" @click="toGetMoney()"
						style="width: 80%; height: 60rpx; line-height: 60rpx; border-radius: 60rpx; margin-top: 40rpx; background-color: #ff6532;">提现</button>
				</view>
				<view class="headLine" />
				<view class="headRight">
					<view>
						累计收入（元）：{{allMoney}}元
					</view>
					<view>
						累计体现（元）：{{getMoney}}元
					</view>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="headText">
			<view class="view1">
				收支明细
			</view>
			<view class="div-line" />
			<view class="context" v-for="(item,index) in moneyCount" :key="index">
				<view class="contextLeft">
					<view>
						{{item.moneyName}}
					</view>
					<view>
						核销时间：{{item.time}}
					</view>
				</view>
				<view class="contextRight">
					{{item.status==0?'+':'-'}} {{item.money}} 元
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 1500,
				allMoney: 1700,
				getMoney: 200,
				moneyCount: [{
					moneyName: 'XX车辆清洗、抛光打蜡服务',
					time: '2025-08-17 10:00:00',
					status: 0,
					money: 200
				}, {
					moneyName: '提现',
					time: '2025-08-17 10:00:00',
					status: 1,
					money: 7890
				}, {
					moneyName: '车辆维修',
					time: '2025-08-17 10:00:00',
					status: 0,
					money: 200
				}, {
					moneyName: 'XX车辆清洗、抛光打蜡服务',
					time: '2025-08-17 10:00:00',
					status: 0,
					money: 130
				}, ],

			}
		},

		methods: {
			toGetMoney(){
				uni.navigateTo({
					url:'/pages/ledgerView/getMoneyApply/getMoneyApply'
				})
			},
		}
	}
</script>

<style scoped>
	.headCss {
		background-color: #3385fd;
		width: 750rpx;
		height: 360rpx;
		position: fixed;
	}

	.div {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		color: #f7f7f7;
	}

	.headLeft {
		flex: 1;
		text-align: center;
		padding: 20rpx;
	}

	.headLeft view:first-child {
		font-size: x-large;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.headLeft view:last-child {
		font-size: 17rpx;
		margin-bottom: 15rpx;
	}



	/* 分隔线 */
	.headLine {
		width: 1rpx;
		height: 200rpx;
		background-color: #eee;
		margin: 0 20rpx;
	}

	.headRight {
		flex: 1;
		padding: 20rpx;
	}

	.headRight view {
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.headText {
		background-color: #fff;
		border-radius: 20rpx;
		width: 710rpx;
		min-height: 400rpx;
		margin-left: 20rpx;
		position: absolute;
		top: 290rpx;
	}

	/* 分割线 */
	.div-line {
		width: 670rpx;
		margin: 20rpx 20rpx 20rpx 20rpx;
		height: 10rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
	}


	.view1 {
		font-size: 40rpx;
		padding: 20rpx 0rpx 0rpx 20rpx;

	}

	/* 父容器使用Flex布局，实现水平排列 */
	.context {
		display: flex;
		/* 启用Flex布局 */
		justify-content: space-between;
		/* 左右区域分别靠两端对齐 */
		align-items: center;
		/* 垂直方向居中对齐 */
		width: 100%;
		/* 宽度占满父容器 */
		padding: 20rpx 30rpx;
		/* 内边距，增加间距 */
		border-bottom: 1rpx solid #eee;
		/* 底部边框，分隔列表项 */
		box-sizing: border-box;
		/* 包含内边距计算宽度 */
	}

	/* 左侧内容区域 */
	.contextLeft {
		/* 自动占据左侧空间，不设置固定宽度 */
	}

	.contextLeft view:first-child {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.contextLeft view:last-child {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	/* 右侧内容区域（居右显示） */
	.contextRight {
		font-size: 30rpx;
		/* 通过Flex布局的justify-content: space-between自然居右 */
		/* 可根据状态设置不同颜色，例如收入为绿色，支出为红色 */
		color: #ff6532;
	}
</style>